<template>
  <Transition name="fade">
    <div class="sub-category" v-if="subFilter">
      <div class="container">
        <!-- 面包屑 -->
        <subBread :subFilter="subFilter"></subBread>
        <!-- 筛选分区 -->
        <subFilter @filter-change="filterChange"></subFilter>
        <!-- 结果区域 -->
        <div class="goods-list">
          <!-- 排序 -->
          <subSort @sort-change="sortChange"></subSort>
          <!-- 商品列表 -->
          <ul class="list">
            <li v-for="goods in list" :key="goods.id">
              <goodsItem :goods="goods"></goodsItem>
            </li>
          </ul>
          <!-- 加载 -->
          <xtx-infinite-loading
            :loading="loading"
            :finished="finished"
            @infinite="getData"
          ></xtx-infinite-loading>
        </div>
      </div>
    </div>
    <subSkeleton v-else></subSkeleton>
  </Transition>
</template>

<script>
import { findSubFilter, findCategoryGoods } from '@/api/category'
import subBread from '@/views/category/components/sub-bread'
import subFilter from '@/views/category/components/sub-filter'
import subSkeleton from '@/views/category/components/sub-skeleton'
import subSort from '@/views/category/components/sub-sort'
import goodsItem from '@/views/category/components/goods-item'
import { useRoute } from 'vue-router'
import { provide, ref, watch } from 'vue'
export default {
  name: 'SubCategory',
  components: { subBread, subFilter, subSkeleton, subSort, goodsItem },
  setup() {
    const route = useRoute()
    const subFilter = ref(null)
    // 商品列表
    const list = ref([])
    // 加载中状态
    const loading = ref(false)
    // 加载完成状态
    const finished = ref(false)
    // 请求参数
    let reqParams = {
      categoryId: '',
      page: 1,
      pageSize: 20
    }
    // watch监听id发生变化，需要重新发送请求【筛选条件】
    watch(
      () => route.params.id,
      async (id) => {
        // 如果不是二级分类，就不发送请求
        if (route.path !== `/category/sub/${id}`) return
        // 分类id为必传参数，当二级分类id有变化，请求参数也需要更新
        reqParams.categoryId = id
        // 切换分类时，清空数据，让页面展示骨架效果
        subFilter.value = null
        // 发送请求接口
        const { result } = await findSubFilter(id)
        // console.log(result, 'result')
        subFilter.value = result
      },
      { immediate: true } // 立即执行，变化的时候再发送请求
    )

    // 用于商品列表 -- 分页查询接口的请求参数
    // 根据请求参数获取商品列表数据
    // 自定义加载事件，加载分页数据
    const getData = async () => {
      // 请求前 - 显示加载中
      loading.value = true
      // 设置二级分类的ID
      reqParams.categoryId = route.params.id
      // 请求中 - 发送请求加载数据
      const { result } = await findCategoryGoods(reqParams)
      if (result.items.length) {
        // 加载更多是数据的追加，注意展开后再追加，否则就是数组内嵌套数组了
        list.value.push(...result.items)
        // 页码加一
        reqParams.page++
      } else {
        finished.value = true
      }
      // 请求完成 - 隐藏加载中
      loading.value = false
    }

    // 1. 更改排序组件的筛选数据，重新请求
    const sortChange = (sortParams) => {
      finished.value = false
      // 合并请求参数，保留之前参数
      reqParams = { ...reqParams, ...sortParams }
      reqParams.page = 1
      list.value = []
      getData()
    }
    // 2. 更改筛选组件的筛选数据，重新请求
    const filterChange = (filterParams) => {
      finished.value = false
      // 合并请求参数，保留之前参数
      reqParams = { ...reqParams, ...filterParams }
      reqParams.page = 1
      list.value = []
      getData()
    }
    // 父组件提供的是响应式对象，子组件内部可以直接修改
    // provide('reqParams', reqParams)
    // 提供数据：provide('key',value)
    // 获取数据：const value = inject('key')
    provide('subFilter', subFilter)
    // 返回给模版绑定
    return {
      subFilter,
      list,
      finished,
      loading,
      getData,
      sortChange,
      filterChange
    }
  }
}
</script>
<style scoped lang="less">
.goods-list {
  background-color: #fff;
  padding: 0 25px;
  margin-top: 25px;
  ul {
    display: flex;
    flex-wrap: wrap;
    padding: 0 5px;
    li {
      margin-right: 20px;
      margin-bottom: 20px;
      &:nth-child(5n) {
        margin-right: 0;
      }
    }
  }
}
</style>
